<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>查询</div>
      </div>
    </header>
    <div class="main">
      <div class="item">
        <div class="item-name">街道/部门</div>
        <div class="item-select" @click="openTk('街道')">
          <div class="item-select-value">{{sendObj.jdmc?sendObj.jdmc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">社区</div>
        <div class="item-select" @click="openTk('社区')">
          <div class="item-select-value">{{sendObj.sqmc?sendObj.sqmc:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">类别</div>
        <div class="item-select" @click="openTk('类别')">
          <div class="item-select-value" v-show="!(sendObj.lbid_b||sendObj.lbid_b===0)">请选择</div>
          <div class="item-select-value" v-show="sendObj.lbid_b||sendObj.lbid_b===0">
            <span>{{sendObj.lbmc_b}}</span>
            <span v-show="sendObj.lbid_s||sendObj.lbid_s===0">-{{sendObj.lbmc_s}}</span>
          </div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">名称/姓名/地址</div>
        <input class="item-value" type="text" placeholder="请输入" maxlength="20" v-model="sendObj.mc" @click="clickValue($event)" />
      </div>
      <div class="item">
        <div class="item-name">隐患</div>
        <div class="item-select" @click="openTk('隐患')">
          <div class="item-select-value" v-show="!(sendObj.yhid_b||sendObj.yhid_b===0)">请选择</div>
          <div class="item-select-value" v-show="sendObj.yhid_b||sendObj.yhid_b===0">
            <span>{{sendObj.yhmc_b}}</span>
            <span v-show="sendObj.yhid_s||sendObj.yhid_s===0">-{{sendObj.yhmc_s}}</span>
          </div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>

      <div class="btn-box">
        <div class="btn radius-m" @click="next">确定</div>
      </div>

      <div class="tk" v-show="tk_type=='街道'||tk_type=='社区'||tk_type=='类别'||tk_type=='隐患'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="full-width-div" v-for="(item,index) of tk_list">
              <div class="tk-item"  :class="{'tk-item-checked':checked.b_id==item.id}" @click="checkedTk(index,null)">
                <span class="tk-item-value">{{item.mc}}</span>
              </div>
              <div class="tk-item" v-show="item.show" v-for="(v,i) of item.child" :class="{'tk-item-checked':checked.s_id==v.id}" @click="checkedTk(index,i)">
                <span class="tk-item-value small-tk-item-value">{{v.mc}}</span>
              </div>
            </div>
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="subTk">确定</div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
export default {
  name: "data_map_search",
  data() {
    return {
      sendObj: {},
      jd_list:[],
      sq_list:[],
      jd_select_flag:false,
      sq_select_flag:false,
      yt_list:[],
      tk_type:'',//显示的弹框，如果为空就隐藏弹框
      tk_list: [], //弹框列表
      checked: {} ,//弹框选中的
      userId:null//用户id
    };
  },
  destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
  methods: {
    back(){
      //this.$router.push('/data_map');
      this.$router.back()
    },
    openTk(type) {//打开弹出框
      var _this = this;

      var checked = {};
      var url = '';
      var params = {};
      if(type=='街道'){//街道
        var _list = _this.jd_list;
        if(!_this.jd_select_flag){
          return;
        }
        for(var n=0;n<_list.length;n++){
          if(!_list[n].child){
            _list[n].child = [];
          }
        }
        _this.tk_list = _list;
        _this.checked = {
          b_id:_this.sendObj.jdid,
          b_mc:_this.sendObj.jdmc
        };
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }else if(type=='社区'){//社区
        if(!_this.sq_select_flag){
          return;
        }
        if(_this.checkNull(_this.sendObj.jdid)||_this.sendObj.jdid===-1){
          if(_this.jd_select_flag){
            _this.$toast('请先选择街道');
          }else{
            _this.$toast('街道id为空');
          }
          return;
        }
        checked = {
          b_id:_this.sendObj.sqid,
          b_mc:_this.sendObj.sqmc
        };
        params = {
          sid:_this.sendObj.jdid
        };
        url = _this.$global_msg.Url.host + "/queryFile/queryCommunity";
      }else if(type=='类别'){//类别
        var _list = [
          {mc:'住改非',id:'zgf',child:_this.yt_list},
          {mc:'建筑物',id:'jzw',child:[
            {mc:'住宅',id:1},
            {mc:'商用',id:2},
            {mc:'商住混合',id:3},
            {mc:'其他',id:4}
          ]},
          {mc:'九小门店',id:'jxmd',child:[
            {mc:'小商场',id:1},
            {mc:'小医院',id:2},
            {mc:'小餐饮场所',id:3},
            {mc:'小旅馆',id:4},
            {mc:'小歌舞厅娱乐场所',id:5},
            {mc:'小网吧',id:6},
            {mc:'小美容洗浴场所',id:7},
            {mc:'小生产加工企业',id:8},
            {mc:'废品回收',id:9},
            {mc:'其他',id:10}
          ]},
          {mc:'企业',id:'qy',child:[]},
        ];
        _this.checked = {
          b_id:_this.sendObj.lbid_b,
          b_mc:_this.sendObj.lbmc_b,
          s_id:_this.sendObj.lbid_s,
          s_mc:_this.sendObj.lbmc_s
        };
        for(var n=0;n<_list.length;n++){
          if(!_list[n].child){
            _list[n].child = [];
          }
          if(_this.checked.b_id===_list[n].id){
            _list[n].show = true;
          }
        }
        _this.tk_list = _list;
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }else if(type=='隐患'){//隐患
        var _list = [
          {mc:'不限',id:2,child:[]},
          {mc:'有',id:1,child:[
            {mc:'限期整改',id:4},
            {mc:'落实管控措施',id:2},
          ]},
          {mc:'无',id:0,child:[]}
        ];
        _this.checked = {
          b_id:_this.sendObj.yhid_b,
          b_mc:_this.sendObj.yhmc_b,
          s_id:_this.sendObj.yhid_s,
          s_mc:_this.sendObj.yhmc_s
        };
        for(var n=0;n<_list.length;n++){
          if(!_list[n].child){
            _list[n].child = [];
          }
          if(_this.checked.b_id===_list[n].id){
            _list[n].show = true;
          }
        }
        _this.tk_list = _list;
        _this.tk_type = type;
        $("html").css("height","100vh");
        $("body").css("height","100vh");
        $("html").css("overflow","hidden");
        $("body").css("overflow","hidden");
        return;
      }
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(url,{
      	params: params
      }).then(function (data) {
        console.log('查询弹框列表:',data);
        if(data&&data.data){
          if(data.data.code===0){
            for(var n=0;n<data.data.rows.length;n++){
              if(!data.data.rows[n].child){
                data.data.rows[n].child = [];
              }
            }
            _this.tk_list = data.data.rows;
            _this.checked = checked;
            _this.tk_type = type;
            $("html").css("height","100vh");
            $("body").css("height","100vh");
            $("html").css("overflow","hidden");
            $("body").css("overflow","hidden");
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      });
    },
    closeTk() {//关闭弹出框
      this.tk_type = "";
      this.tk_list = [];
      this.checked = null;
      $("html").css("height","auto");
      $("body").css("height","auto");
      $("html").css("overflow","auto");
      $("body").css("overflow","auto");
    },
    checkedTk(index,i) {//弹出框选中选项
      var _this = this;
      if(i||i===0){//小类
        _this.checked.s_id = _this.tk_list[index].child[i].id;
        _this.checked.s_mc = _this.tk_list[index].child[i].mc;
      }else{//大类
        if(_this.checked.b_id===_this.tk_list[index].id){
          _this.checked.b_id = null;
          _this.checked.b_mc = null;
          _this.checked.s_id = null;
          _this.checked.s_mc = null;
          for(var n=0;n<_this.tk_list.length;n++){
            _this.tk_list[n].show = false;
          }
        }else{
          _this.checked.b_id = _this.tk_list[index].id;
          _this.checked.b_mc = _this.tk_list[index].mc;
          _this.checked.s_id = null;
          _this.checked.s_mc = null;
          for(var n=0;n<_this.tk_list.length;n++){
            _this.tk_list[n].show = false;
          }
          if(_this.tk_list[index].child&&_this.tk_list[index].child.length>0){
            _this.tk_list[index].show = true;
          }else{
            _this.tk_list[index].show = false;
          }
        }
      }
      _this.$forceUpdate();
    },
    subTk(){
      var _this = this;
      if (_this.tk_type == "街道") {//街道
        _this.sendObj.jdid = _this.checked.b_id;
        _this.sendObj.jdmc = _this.checked.b_mc;
      } else if (_this.tk_type == "社区") {//社区
        _this.sendObj.sqid = _this.checked.b_id;
        _this.sendObj.sqmc = _this.checked.b_mc;
      } else if (_this.tk_type == "类别") {//类别
        _this.sendObj.lbid_b = _this.checked.b_id;
        _this.sendObj.lbmc_b = _this.checked.b_mc;
        _this.sendObj.lbid_s = _this.checked.s_id;
        _this.sendObj.lbmc_s = _this.checked.s_mc;
      } else if (_this.tk_type == "隐患") {//隐患
        _this.sendObj.yhid_b = _this.checked.b_id;
        _this.sendObj.yhmc_b = _this.checked.b_mc;
        _this.sendObj.yhid_s = _this.checked.s_id;
        _this.sendObj.yhmc_s = _this.checked.s_mc;
      }
      _this.closeTk();
    },
    inputValue(key) {//限制输入框的值
      var _this = this;
      var value = _this.sendObj[key];
      if(value==null||value==undefined){
        value = '';
      }else{
        value += '';
      }
      if (key == "phone") {//输入大于0的正整数
        if (value.length == 1) {
          value = value.replace(/[^1-9]/g, "");
        } else {
          value = value.replace(/\D/g, "");
        }
      }
      _this.sendObj[key] = value;
      _this.$forceUpdate();
    },
    clickValue(e){//点击后光标移到最后
      var t = $(e.currentTarget).val();
      $(e.currentTarget).val("").focus().val(t);
    },
    getListObjMc(name,key){//根据id获取列表对象的名称
      var cqxz = [
          {mc:'住宅',id:1},
          {mc:'商用',id:2},
          {mc:'商住混合',id:3},
          {mc:'其他',id:4}
      ];
      var xfqk = [
          {mc:'正常',id:1},
          {mc:'部分设施缺失但能正常供水',id:2},
          {mc:'不能正常供水',id:3}
      ];
      var lb = [
        {mc:'小商场',id:1},
        {mc:'小医院',id:2},
        {mc:'小餐饮场所',id:3},
        {mc:'小旅馆',id:4},
        {mc:'小歌舞厅娱乐场所',id:5},
        {mc:'小网吧',id:6},
        {mc:'小美容洗浴场所',id:7},
        {mc:'小生产加工企业',id:8},
        {mc:'废品回收',id:9},
        {mc:'其他',id:10}
      ];
      var result = '';
      var list = [];
      if(name=='cqxz'){
        list = cqxz;
      }else if(name=='xfqk'){
        list = xfqk;
      }else if(name=='lb'){
        list = lb;
      }

      for(var n=0;n<list.length;n++){
        if(list[n].id===key){
          result = list[n].mc;
        }
      }
      return result;
    },
    init() {
      var _this = this;
      _this.jd_list = localStorage.getItem("jd_list")?JSON.parse(localStorage.getItem("jd_list")):[];
      _this.sq_list = localStorage.getItem("sq_list")?JSON.parse(localStorage.getItem("sq_list")):[];
      var jdsqObj = localStorage.getItem("jdsqObj")?JSON.parse(localStorage.getItem("jdsqObj")):{};
      _this.sendObj.jdid = jdsqObj.jd_id;
      _this.sendObj.jdmc = jdsqObj.jd_mc;
      _this.sendObj.sqid = jdsqObj.sq_id;
      _this.sendObj.sqmc = jdsqObj.sq_mc;
      if(jdsqObj.jd_select_flag=='是'){
        _this.jd_select_flag = true;
      }else if(jdsqObj.jd_select_flag=='否'){
        _this.jd_select_flag = false;
      }else{
        _this.jd_select_flag = false;
      }
      if(jdsqObj.sq_select_flag=='是'){
        _this.sq_select_flag = true;
      }else if(jdsqObj.sq_select_flag=='否'){
        _this.sq_select_flag = false;
      }else{
        _this.sq_select_flag = false;
      }
      _this.$forceUpdate();
    },
    getYt() {
      var _this = this;
      _this.yt_list = [];
      _this.axios.get(_this.$global_msg.Url.host + "/queryFile/selectYt",{
      	params: {}
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('selectStreetAndCommunity:',data);
        if(data&&data.data){
          if(data.data.code===0){
            if(data.data.rows&&data.data.rows.length>0){
              _this.yt_list = data.data.rows;
            }
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('用途查询失败');
        }
      });
    },
    checkNull(value){//检测是否为空
      if(value||value===0||value==='0'){
        return false;
      }else{
        return true;
      }
    },
    next() {//保存
      var _this = this;
      localStorage.setItem("data_map_searchObj",JSON.stringify(this.sendObj));
      //this.$router.push('/data_map');
      this.$router.back()
    },
    plusReady: function() {

    }
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  mounted() {
    var _this = this;
    this.userId = localStorage.getItem("userId"); //用户id
    //初始化
    this.init();
    this.getYt();

    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  created() {

  }
};
</script>
<style scoped>
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
.tk-listt{
padding: 0.1rem;
}
.img-input{
  padding:  0.27037rem;
 position: relative;
 top: 0.1rem;
  width: 89%;
  display: block;
  margin: auto;
  border: 1px solid #ddd;
}
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    padding-top: 1.8519rem;
    /* height: 100vh; */
    box-sizing: border-box;
    background: #fff;
    /*padding-bottom: 3.796314814814815rem; */
    /* padding-top: 10.0008px; */
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .item{
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #DDDDDD solid;
  }
  .item .item-name{
    padding-left: 0.37037rem;
    padding-right: 0.37037rem;
    flex: 1;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item .item-value{
    width: 5.555555rem;
    margin-right: 0.37037rem;
    color: #a3a3a3;
    font-size: 0.388888rem;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item input{
    text-align: left !important;
  }
  .item .item-select{
    width: 5.555555rem;
    margin-right: 0.37037rem;
    color: #a3a3a3;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item .item-select .item-select-value{
    flex: 1;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .item .item-select .item-select-value input{
    width: 100%;
    height: 100%;
    text-align: right;
  }
  .item .item-select .item-select-icon{
    margin-left: 0.222222rem;
    width: 0.453703rem;
    height: 0.611111rem;
    display: flex;
    align-items: center;
  }

  /* 图片列表 */
  .img-box{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item{
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content{
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }
  .img-box .img-item .img-content .img-src{
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  .img-box .img-item .img-content .img-group{
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-box .img-item .img-content .img-group .img-btn{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }
  .img-box .img-item .img-content .img-group .img-btn:last-child{
    border-left: none;
  }
  .img-box .del-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  /* 图片列表的描述 */
  .img-box .show-desc{
    height: 3.703703rem;
  }
  .img-box .img-item .img-desc{
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }
  .img-box .show-desc .img-desc{
    display: block;
  }

  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img-list:first-child{
    margin-left: 4.814814rem;
  }
  .imgs_ul{
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }
  .img_upload .img-item{
    z-index: 3 !important;
  }



  /* 按钮 */
  .btn-box{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 1.37037rem;
  }
  .btn-box .btn{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }


  /* 弹框 */
  .tk{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tk .tk-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 31;
    background-color: rgba(0,0,0,0.4);
  }
  .tk .tk-box{
    width: 9rem;
    height: 9rem;
    background-color: #FFFFFF;
    z-index: 32;
    display: flex;
    flex-direction: column;
    border-radius: 0.222222rem;
  }

  .tk .tk-head{
    width: 100%;
    height: 1.4351851851851851rem;
    font-size: 0.388888rem;
    border-bottom: 1px #ddd solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tk .tk-head .tk-head-title{
    margin-left: 0.37037rem;
    flex: 1;
    height: 1.4351851851851851rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-head .tk-head-close{
    margin-right: 0.37037rem;
    width: 0.444444rem;
    height: 0.444444rem;
  }


  .tk .tk-list{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .tk .tk-item{
    width: 100%;
    height: 1.3888888888888888rem;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-item .tk-item-value{
    margin-left: 0.37037rem;
  }
  .tk .tk-list .tk-item-checked{
    color: #2a6cfe;
  }
  .small-tk-item-value{
    margin-left: 0.925925rem !important;
  }

  .tk .tk-btns{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 0.37037rem;
  }
  .tk .tk-btns .tk-btn{
    margin-left: 1.851851rem;
    margin-right: 1.851851rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }
  .tk .jzw{
    max-height: 11.111111rem !important;
  }
  .tk .lb{
    max-height: 14.814814rem !important;
  }
  .full-width-div{
    width: 100%;
    height: auto;
  }

  /* 底部弹框 */
  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child{
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end{
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_title{
    color: #919191;
  }
  .btm_tk_cancle{
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }
  .van-popup{
    background: none;
  }

  /* 视频列表 */
  .video-list{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
  }
  .video-list video{
    width: 100%;
    height: 4.87037rem !important;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }

</style>
